<template>
  <view v-if="!isLoading">
    <view class="lists" v-if="!isEmpty">
      <view :class="item.refund_read==1?'item grey':'item'" v-for="(item,index) in lists">
        <view class="create">
          <text>资料提交时间：{{$xyfun.timeFormat(item.createtime,'yyyy-mm-dd')}}</text>
          <text v-if="item.refund_read==0" class="yz-iconfont yz-2"></text>
        </view>
        <view class="reson">
          {{item.refund_reson}}
        </view>
        <view class="refund">
          驳回时间：{{$xyfun.timeFormat(item.createtime,'yyyy-mm-dd')}}
        </view>
      </view>
    </view>
    <view v-else>
      <xy-empty text="暂无数据" />
    </view>
  </view>
</template>

<script>
import { mapState } from 'vuex';
import xyEmpty from '@/components/xy-empty';
export default {
  components: {
    xyEmpty,
  },
  data() {
    return {
      isLoading:true,
      isEmpty: true,
      lists: [],
      currentPage: 1,
      lastPage: 1,
    }
  },
  computed: {
    ...mapState(['common'])
  },
  async onLoad(options) {
    if(options?.type){
      this.type = options.type;
    }
    this.loadData();
  },
  onPullDownRefresh() {
    this.currentPage = 1;
    this.lists = [];
    this.loadData();
  },
  onReachBottom() {
    if(this.currentPage < this.lastPage) {
      this.currentPage += 1;
      this.loadData();
    }
  },
  methods: {
    async loadData(){

      this.$api.postBase({
        url: '/teacher/refund_msg',
        loadingTip:'加载中...',
        data: {
          page: this.currentPage,
        },
        success: res => {
          uni.stopPullDownRefresh();
          this.isLoading = false;
          this.lists = [...this.lists, ...res.data];
          this.isEmpty = !this.lists.length;
          this.currentPage = res.current_page;
          this.lastPage = res.last_page;
        }
      });
    },

  }
}
</script>

<style scoped lang="scss">
.lists{
  padding: 20rpx;
  .item{
    background: #fcd3d0;
    border-radius: 10rpx;
    margin-bottom: 20rpx;
    box-sizing: border-box;
    padding: 20rpx;
    font-size: 24rpx;
    color: #555;
    &.grey{
      background: #f2f2f2 !important;
    }
    .create{
      display: flex;
      justify-content: space-between;
      .yz-iconfont{
        color: $uni-color-error;
        font-size: 40rpx;
      }
    }
    .reson{
      text-align: left;
      margin: 20rpx 0;
    }
    .refund{
      text-align: right;
    }
  }
}
</style>